<template>
  <div id="app">
    <div class="message-box" id="msgBox"></div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
    };
  },

  mounted() {
   
  },
  created() {
   
  },
  computed: {
    
  },
  watch: {
    
  },
  methods: {
    
  },
};
</script>

<style lang="scss">


.message-box {
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99999;
  transition: all 0.3s;

  .message-content {
    content: "";
    margin: 0 auto;
    font-size: 14px;
    border-radius: 6px;
    background-color: rgb(85, 85, 85);
    display: flex;
    align-items: center;
    padding: 5px 20px;
    margin-bottom: 10px;
    transition: all 0.3s;
    transform: translateY(0);
    opacity: 0;
  }

  .show-message-content {
    transform: translateY(100%);
    opacity: 1;
  }

  .hide-message-content {
    transform: translateY(0);
    opacity: 0;
  }

  .message-content-info {
    background-color: #f4f4f5;
    border: 1px solid #ebeef5;
    color: #909399;

    &::before {
      content: "";
      display: block;
      height: 18px;
      width: 18px;
      margin-right: 10px;
      background-size: 100%;
      background-image: url(./assets/img/message/info.svg);
    }
  }

  .message-content-success {
    background-color: #f0f9eb;
    border: 1px solid #e1f3d8;
    color: #67c23a;

    &::before {
      content: "";
      display: block;
      height: 18px;
      width: 18px;
      margin-right: 5px;
      background-size: 100%;
      background-image: url(./assets/img/message/success.svg);
    }
  }

  .message-content-error {
    background-color: #fef0f0;
    border: 1px solid #fde2e2;
    color: #f56c6c;

    &::before {
      content: "";
      display: block;
      height: 18px;
      width: 18px;
      margin-right: 2px;
      background-size: 100%;
      background-image: url(./assets/img/message/error.svg);
    }
  }

  .message-content-warning {
    background-color: #fdf6ec;
    border: 1px solid #faecd8;
    color: #e6a23c;

    &::before {
      content: "";
      display: block;
      height: 18px;
      width: 18px;
      margin-right: 5px;
      background-size: 100%;
      background-image: url(./assets/img/message/warning.svg);
    }
  }
}


</style>
